<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="../js/vue-2.6.12.js"></script>
<script type="text/javascript" src="../js/vue-router-3.4.9.js"></script>
<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <hr>
    <router-view></router-view>
</div>

<template id="phone-login-form">
    <form action="">
        手机号: <input type="number" name="phone" > <br>
        验证码: <input type="password" name="code"> <br>
        <input type="submit" value="登录">
    </form>
</template>
<template id="account-login-form">
    <form action="">
        用户名: <input type="text" name="username" > <br>
        密码: <input type="password" name="pwd"> <br>
        <input type="submit" value="登录">
    </form>
</template>
<template id="register-form">
    <form action="">
        用户名: <input type="text" name="username" > <br>
        密码: <input type="password" name="pwd1"> <br>
        确认密码: <input type="password" name="pwd2" > <br>
        <input type="submit" value="注册">
    </form>
</template>

<script>
    const registerForm = {
        template:"#register-form"
    }

    const phoneLogin = {
        template:"#phone-login-form"
    }
    const accountLogin = {
        template:"#account-login-form"
    }

    const loginForm = {
        template:`
                <div>
                    <router-link to="/phone_login">手机验证码登录</router-link>
                    <router-link to="/login/user">用户名密码登录</router-link> <br> <br>
                    <router-view></router-view>
                </div>
            `
    }

    const router = new VueRouter({
        routes:[
            {path:"/",redirect:"/register"},
            {path:"/register",component:registerForm},
            {
                path:"/login",
                component:loginForm
            },
            {
                path:"/phone_login",
                component:phoneLogin
            },
            {
                path:"/login/user",
                component:accountLogin
            }
        ]
    })

    const vm = new Vue({
        el:"#app",
        router
    })
</script>
</body>
</html>